<template>
    <div>
        <div class="edu-page-warp">
            <div class="edu-opertion-bar" v-if="isShow == 1">
                <el-card>
                    <div>
                        <el-row :gutter="10" type="flex" justify="center">
                            <el-col :span="5" class="flex-right border">学号：</el-col>
                            <el-col :span="5" class="flex-left border">
                                <el-input
                                    v-model.trim="stuentForm.studentId"
                                    style="width: 100%"
                                    class="input"
                                    maxlength="50"
                                    placeholder="请输入"
                                    @keyup.enter.native="
                                        getDataSearchByStudentId(stuentForm.studentId)
                                    "
                                >
                                    <i
                                        slot="suffix"
                                        class="el-input__icon el-icon-search"
                                        @click="getDataSearchByStudentId(stuentForm.studentId)"
                                    ></i>
                                </el-input>
                            </el-col>
                        </el-row>
                        <el-row :gutter="10" type="flex" justify="center">
                            <el-col :span="5" class="flex-right border">姓名：</el-col>
                            <el-col :span="5" class="flex-left border">
                                {{ studentInfo.studentName }}
                            </el-col>
                        </el-row>
                        <el-row :gutter="10" type="flex" justify="center">
                            <el-col :span="5" class="flex-right border">学院：</el-col>
                            <el-col :span="5" class="flex-left border">
                                {{ studentInfo.facultyI18n }}
                            </el-col>
                        </el-row>
                        <el-row :gutter="10" type="flex" justify="center">
                            <el-col :span="5" class="flex-right border">专业：</el-col>
                            <el-col :span="5" class="flex-left border">
                                {{ studentInfo.professionI18n }}
                            </el-col>
                        </el-row>
                    </div>

                    <div style="margin: 20px auto; text-align: center">
                        <el-button @click="resetStudentMessage">重置</el-button>
                        <el-button @click="checkFun" type="primary">查询</el-button>
                    </div>
                </el-card>
            </div>
            <div class="edu-opertion-bar" v-if="isShow == 2">
                <studentMinorScoreDetail
                    :studentMessage="studentMessage"
                    @back="toBack"
                ></studentMinorScoreDetail>
            </div>
        </div>
    </div>
</template>
<script>
import api from 'common/src/api/score/bachelor/scoreCheckByAdmin'
import studentMinorScoreDetail from './studentMinorScoreDetail'
import scoreManagementApi from 'common/src/api/scoreManagement/scoreManagement';
export default {
    components: {
        studentMinorScoreDetail,
    },
    mounted() {},
    data() {
        return {
            isShow: 1,
            stuentForm: {
                studentId: '',
            },
            studentInfo: {
                studentName: '',
                facultyI18n: '',
                professionI18n: '',
                faculty: '',
            },
            isCanApply: false,
        }
    },
    methods: {
        toBack() {
            this.isShow = 1
            this.resetStudentMessage()
        },
        getDataSearchByStudentId(id) {
            this.stuentForm.studentId = this.stuentForm.studentId.replace(/[^\d]/g, '')
            if (this.stuentForm.studentId == '' || this.stuentForm.studentId.length == 0) {
                this.$message({
                    type: 'warning',
                    message: '请输入正确的学号！',
                })
                return
            }
            scoreManagementApi.queryStudentBasicInfo(this.stuentForm.studentId).then(({ code, data }) => {
                if (code != 200) return
                if (!data) {
                    this.$message({
                        type: 'warning',
                        message: '没有匹配的学生信息请输入正确的学号！',
                    })
                    for (let key in this.studentInfo) {
                        this.$set(this.studentInfo, key, '')
                    }
                    this.isCanApply = false
                    return
                } else {
                    for (let key in this.studentInfo) {
                        this.$set(this.studentInfo, key, data[key])
                        this.studentMessage = data
                    }
                    this.isCanApply = true
                }
            })
        },
        resetStudentMessage() {
            for (let key in this.studentInfo) {
                this.$set(this.studentInfo, key, '')
            }
            this.stuentForm.studentId = ''
            this.isCanApply = false
        },
        checkFun() {
            if (this.stuentForm.studentId == '' || this.stuentForm.studentId.length == 0) {
                this.$message({
                    message: '请先输入正确的学生学号再进行查询操作',
                    type: 'warning',
                })
                return
            } else {
                if (this.isCanApply == true) {
                    this.isShow = 2
                } else {
                    this.$message({
                        message: '没有匹配到学生信息，请输入正确的学生学号',
                        type: 'warning',
                    })
                    return
                }
            }
        },
    },
}
</script>
<style lang="scss" scoped>
.footer-button {
    text-align: right;
    float: right;
    top: 30px;
    margin-bottom: 40px;
}
.flex-left {
    display: flex;
    justify-content: flex-start;
}

.flex-right {
    display: flex;
    justify-content: flex-end;
    background-color: #edf1f5;
}

.border {
    border: 1px solid #d2d4d6;
    height: 40px;
    align-items: center;
}
</style>